﻿@namespace BootstrapBlazor.Components
@typeparam TItem
@inherits TableBase<TItem>

<div class="table-container" @ref="TableWrapper">
    <div class="table-toolbar">
        @if (ShowToolbar)
        {
            <TableToolbar TItem="TItem" OnGetSelectedRows="@GetSelectedRows">
                @if (ShowDefaultButtons)
                {
                    @if (ShowNewButton)
                    {
                        <TableToolbarButton TItem="TItem" Color="Color.Success" OnClick="@AddAsync" Icon="fa fa-fw fa-plus" Text="新建" />
                    }
                    @if (ShowEditButton)
                    {
                        <TableToolbarButton TItem="TItem" Color="Color.Primary" OnClick="@Edit" Icon="fa fa-fw fa-pencil" Text="编辑" />
                    }
                    @if (ShowDeleteButton)
                    {
                        <TableToolbarPopconfirmButton Color="Color.Danger" Icon="fa fa-fw fa-remove" Text="删除"
                                                      OnBeforeClick="@ConfirmDelete" OnConfirm="@DeleteAsync"
                                                      CloseButtonText="取消" Content="确认要删除选中的所有行吗？"
                                                      ConfirmButtonText="删除" ConfirmButtonColor="Color.Danger" />
                    }
                }
                @TableToolbarTemplate
            </TableToolbar>
            @if (ShowRefresh)
            {
                <div class="float-right table-toolbar-button table-column-right">
                    <button class="btn btn-secondary" type="button" title="刷新" @onclick="@QueryAsync">
                        <i class="fa fa-fw fa-refresh"></i>
                        <span class="d-none d-sm-inline-block">刷新</span>
                    </button>
                </div>
            }
        }
        @if (ShowSearch)
        {
            <div class="float-right table-toolbar-button btn-group">
                <div class="input-group">
                    <BootstrapInput TItem="string" class="table-toolbar-search" placeholder="搜索" @bind-Value="@SearchText" @onkeyup="@OnKeyUp">
                        <Tooltip Placement="Placement.Top" Title="@SearchTooltip" IsHtml="true" />
                    </BootstrapInput>
                    <div class="input-group-append">
                        <button class="btn btn-secondary" type="button" title="搜索" @onclick="@SearchClick">
                            <i class="fa fa-fw fa-search"></i>
                            <span class="d-none d-sm-inline-block">搜索</span>
                        </button>
                        <button class="btn btn-secondary" type="button" title="清空过滤" @onclick="@ClearSearchClick">
                            <i class="fa fa-fw fa-trash"></i>
                            <span class="d-none d-sm-inline-block">清空过滤</span>
                        </button>
                        @if (ShowAdvancedSearch)
                        {
                            <button class="@AdvanceSearchClass" type="button" title="高级搜索" @onclick="@AdvancedSearchClick">
                                <i class="fa fa-fw fa-search-plus"></i>
                                <span class="d-none d-sm-inline-block">高级搜索</span>
                            </button>
                        }
                    </div>
                </div>
            </div>
        }
    </div>

    <TableColumnCollection OnSortAsync="@OnSortAsync" OnFilterAsync="@OnFilterAsync">
        <div class="@WrapperClassName" style="@WrapperStyleName">
            <table class="@ClassName">
                @TableColumns?.Invoke(HeaderModel)
                <colgroup>
                    @if (IsMultipleSelect)
                    {
                        @if (ShowCheckboxText)
                        {
                            <col width="80" />
                        }
                        else
                        {
                            <col width="36" />
                        }
                    }
                    <TableColumnContent />
                    @if (ShowExtendButtons)
                    {
                        <col width="@ExtendButtonColumnWidth" />
                    }
                </colgroup>
                <tbody>
                    @if (Items != null)
                    {
                        @foreach (var item in Items)
                        {
                            <TableRow TItem="TItem" Item="@item" IsMultipleSelect="@IsMultipleSelect"
                                      ShowDefaultButtons="@ShowDefaultButtons" ShowDeleteButton="@ShowDeleteButton" ShowEditButton="@ShowEditButton"
                                      ShowNewButton="@ShowNewButton" ShowExtendButtons="@ShowExtendButtons"
                                      OnClickEditButton="@ClickEditButton" OnClickDeleteButton="@ClickDeleteButton" OnDelete="@DeleteAsync"
                                      OnCheck="@OnCheck" RowCheckState="@RowCheckState"
                                      IsActive="@CheckActive(item)" OnSelectedRow="@SelectRow" OnEditRow="@DoubleClickRow"
                                      ClickToSelect="@ClickToSelect" DoubleClickToEdit="@DoubleClickToEdit"
                                      OnDoubleClickRowCallback="@OnDoubleClickRowCallback">
                                @RowButtonTemplate?.Invoke(item)
                            </TableRow>
                        }
                    }
                    else
                    {
                        <TableLoading IsMultipleSelect="@IsMultipleSelect" ShowExtendButtons="@ShowExtendButtons" />
                    }
                </tbody>
                <thead>
                    <tr>
                        @if (IsMultipleSelect)
                        {
                            <th class="@CheckboxColumnClass">
                                <div class="table-cell">
                                    <Checkbox TValue="TItem" @ref="@HeaderCheckbox" DisplayText="@CheckboxDisplayTextString" State="@HeaderCheckState()" OnStateChanged="@OnHeaderCheck" ShowAfterLabel="@ShowCheckboxText"></Checkbox>
                                </div>
                            </th>
                        }
                        <TableHeaderContent SortIcon="@SortIcon" SortIconAsc="@SortIconAsc" SortIconDesc="@SortIconDesc" />
                        @if (ShowExtendButtons)
                        {
                            <th class="@ButtonColumnClass">
                                <div class="table-cell is-button-column">
                                    @ColumnButtonTemplateHeaderText
                                </div>
                            </th>
                        }
                    </tr>
                </thead>
                @if (ShowFooter)
                {
                    <tfoot>
                        <tr>@TableFooter</tr>
                    </tfoot>
                }
            </table>
        </div>

        @if (TotalCount > 0 && IsPagination)
        {
            <div class="table-pagination">
                <Pagination PageItemsSource="@PageItemsSource" PageItems="@PageItems" TotalCount="@TotalCount" PageIndex="@PageIndex" OnPageClick="@OnPageClick" OnPageItemsChanged="@OnPageItemsChanged"></Pagination>
            </div>
        }

        <div class="table-filter">
            <TableFilterContent />
        </div>

        @if (OnSaveAsync != null || OnAddAsync != null)
        {
            <Modal @ref="EditModal">
                <ModalDialog Title="@EditModalTitleString" Size="@Size.ExtraLarge" IsCentered="true" ShowFooter="false">
                    <BodyTemplate>
                        <ValidateForm Model="@EditModel" OnValidSubmit="@Save">
                            @if (EditTemplate != null)
                            {
                                @EditTemplate?.Invoke(EditModel)
                            }
                            else
                            {
                                <div class="form-inline">
                                    <div class="row">
                                        <TableEditorContent TModel="TItem" Model="@EditModel" />
                                    </div>
                                </div>
                            }
                            <div class="modal-footer table-modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">
                                    <i class="fa fa-fw fa-times"></i>
                                    <span>关闭</span>
                                </button>
                                <Button Color="Color.Primary" IsTriggerValidate="true" Icon="fa fa-fw fa-save" Text="保存" />
                            </div>
                        </ValidateForm>
                    </BodyTemplate>
                </ModalDialog>
            </Modal>
        }

        @if (ShowSearch && ShowAdvancedSearch)
        {
            <Modal @ref="@SearchModal">
                <ModalDialog Title="查询条件" Size="@Size.Large" ShowCloseButton="false" IsCentered="true">
                    <BodyTemplate>
                        @if (SearchTemplate != null)
                        {
                            @SearchTemplate?.Invoke(SearchModel)
                        }
                        else
                        {
                            <div class="form-inline">
                                <div class="row">
                                    <TableEditorContent TModel="TItem" Model="@SearchModel" IsSearch="true" />
                                </div>
                            </div>
                        }
                    </BodyTemplate>
                    <FooterTemplate>
                        <button type="button" class="btn btn-info" data-dismiss="modal" @onclick="@ResetSearchClick">
                            <i class="fa fa-fw fa-trash-o"></i>
                            <span>重置</span>
                        </button>
                        <button type="button" class="btn btn-primary" data-dismiss="modal" @onclick="@SearchClick">
                            <i class="fa fa-fw fa-search"></i>
                            <span>查询</span>
                        </button>
                    </FooterTemplate>
                </ModalDialog>
            </Modal>
        }
    </TableColumnCollection>
</div>
